<template>
	<view class="container">
		<view class="header">
		<!-- 	<view class="list_a">
				<view>当前获得积分：</view>
				<view class="txt">{{data.money}}</view>
			</view> -->
			<view class="list_b">
				<view>已连续签到</view>
				<view class="num">{{data.number}}</view>
				<view>天！</view>
			</view>

		</view>
		<view class="center">
			<view class="box">
				<view class="dayList">
					<view class="day" v-for="(item,index) in data.signList" :key="index">
						<uni-icons v-if="item.number>0" type="checkbox-filled" color="#00C356" size="30"></uni-icons>
						<uni-icons v-if="item.number==0" type="checkbox-filled" color="#F1F1F1" size="30"></uni-icons>
						<!-- <image v-if="index==6" src="https://pili-vod.guanxikeji.com/moban/img/1717664380008.png" mode=""></image> -->
						<!-- <text>第{{index+1}}天</text> -->
						<text>{{ item.CreatedAt=='1-1'?'未签到':item.CreatedAt}}</text>
					</view>
				</view>
				<view class="btn" @click="sign">
					{{isTodayInArray()?'已签到':'立即签到'}}
				</view>
			</view>
		</view>
		<view class="bom">
			—— 签到说明 ——
		</view>
		<view class="bombox">
			<view class="box">
				<view>·每日签到一次</view>
			<view>·每日签到一次，签到及自动排队</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	const {
		proxy,
		appContext
	} = getCurrentInstance();
	const data = reactive({
		is_open: 0,
		number: 0,
		signList: [],
		money: 0
	})
	let userInfo = ref({})
	onLoad((option) => {
		getSign()

	})
	onShow(() => {

	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})

	// 获取签到记录
	function getSign() {
		proxy.$request({
			url: `api/user_info/`,
			method: 'get',
			success(resd) {
				if (resd.errno == 0) {
					userInfo.value = resd.data
					uni.setStorageSync('userInfo', resd.data)
					getTodaysign()
					proxy.$request({
						url: `api/sign/`,
						method: 'get',
						success(res) {
							data.is_open = res.data.is_open
							const Obj = filterTodayAndYesterday(res.data.signList)
							console.log(Obj, "oBJKL")
							data.number = Obj.length > 0 ? Obj[0].number : 0
							const result = JSON.parse(JSON.stringify(res.data.signList))
							result.forEach(item => {
								const date = new Date(item.CreatedAt);
								const month = date.getMonth() + 1; // 月份从0开始，所以需要加1
								const day = date.getDate();
								item.CreatedAt = `${month}-${day}`;
							});

							data.signList = getRecentDays()
							data.signList.forEach(item => {
								const found = result.find(obj => obj.CreatedAt === item.CreatedAt);
								console.log(found, "found")
								if (found) {
									item.number = found.number;
								}
							});
						}
					})
				}
			}
		})

	}

	//获取最近7天
	function getRecentDays() {
		const today = new Date();
		const days = [];

		for (let i = -5; i <= 1; i++) {
			const currentDate = new Date(today);
			currentDate.setDate(today.getDate() + i);
			const month = currentDate.getMonth() + 1;
			const day = currentDate.getDate();
			days.push({
				CreatedAt: `${month}-${day}`,
				number: 0
			});
		}

		return days;
	}

	function isTodayInArray() {
		const today = new Date();
		const todayFormatted = `${today.getMonth() +1}-${today.getDate()}`;
		for (let i = 0; i < data.signList.length; i++) {
			if (data.signList[i].CreatedAt === todayFormatted) {
				if (data.signList[i].number > 0) {
					return true;
				}
			}
		}
		return false;
	}
	// 签到
	function sign() {
		if (isTodayInArray()) {
			uni.showToast({
				icon: 'none',
				title: '今天已经签到过了'
			})
			return
		}
		proxy.$request({
			url: `api/sign/`,
			method: 'POST',
			success(res) {
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				getTodaysign()
				if (res.errno == 0) {
					getSign()
				}
			}
		})
	}
	//获取签到最近一天
	function filterTodayAndYesterday(data) {
		const today = new Date();
		const yesterday = new Date(today);
		yesterday.setDate(yesterday.getDate() - 1);

		let recentDay = null;
		let recentDayObj = null;
		console.log(data, "data")
		data.forEach(item => {
			const createdAt = new Date(item.CreatedAt);
			if (createdAt >= yesterday && createdAt <= today) {
				if (!recentDay || createdAt > recentDay) {
					recentDay = createdAt;
					recentDayObj = item;
				}
			}
		});
		if (recentDayObj) {
			return [recentDayObj];
		} else {
			return [];
		}
	}

	function getTodaysign() {
		appContext.config.globalProperties.$request({
			url: `api/record/?page=${1}&size=${10}&wallet_type=${1}&detailed=20`,
			method: 'GET',
			success(res) {
				if (res.data.data.length > 0) {
					// 创建一个 Date 对象表示当前日期和时间
					const now = new Date();

					// 创建一个 Date 对象表示指定的日期和时间
					const targetDate = new Date(res.data.data[0].CreatedAt);

					// 比较年份、月份和日期是否相同
					const isSameDay = now.getFullYear() === targetDate.getFullYear() &&
						now.getMonth() === targetDate.getMonth() &&
						now.getDate() === targetDate.getDate();

					if (isSameDay) {
						data.money = res.data.data[0].money
					}
				}

			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		background-image: url("https://pili-vod.guanxikeji.com/moban/img/1719903159156.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 95vh;
		overflow: hidden;

		.header {
			height:56rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx 4rpx 6rpx 2rpx rgba(255, 255, 255, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			margin: 0rpx 20rpx;
			margin-top: 500rpx;

			padding: 24rpx;

			.list_a {

				display: flex;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				align-items: center;

				.txt {
					font-weight: bold;
					font-size: 52rpx;
					color: #00C356;
					margin-left: 10rpx;
				}
			}

			.list_b {
				margin-top: 8rpx;
				display: flex;
				background: #FFFFFF;
				box-shadow: inset 0rpx 4rpx 6rpx 2rpx rgba(255, 255, 255, 0.5);
				border-radius: 32rpx 32rpx 32rpx 32rpx;

				.num {


					background: rgba(0, 195, 86, 0.15);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #00C356;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0rpx 10rpx;
					padding: 5rpx 20rpx;
				}
			}
		}

		.center {
			width: 100%;
			margin-top: 52rpx;
			display: flex;
			justify-content: center;

			.box {
				margin: 0rpx 20rpx;
				width: 100%;
				padding: 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(23, 127, 255, 0.18);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
			}
		}

		.dayList {
			display: flex;
			margin-top: 20px;

			.day {
				width: calc(100% / 7);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 11px;
				color: #909090;

				image {
					width: 30px;
					height: 30px;
				}

				text {
					margin-top: 5px;
				}
			}


		}

		.btn {
			width: 195px;
			background: #00C356;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 20px auto;
			height: 90rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx #DEEDFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.bom {
			margin-top: 104rpx;
			display: flex;
			justify-content: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
		}

		.bombox {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 32rpx;

			.box {
				width: 85%;
				font-weight: 400;
				font-size: 28rpx;
				color: #fff;
			}
		}

	}
</style>